<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/Login.css">
    <script type="text/javascript">


        var check_reader = false;
        var check_writer = false;
        var check_admin = false;

        window.onload = function () {

            check_reader = false;
            check_writer = false;
            check_admin = false;

            //读者登陆
            var formobj = document.getElementById("form_reader");
            formobj.onsubmit = function () {
                if (check_reader == true) {
                    return true;
                } else {
                    alert("登录名或密码不正确！")
                    return false;
                }
            }
            //读者注册
            var btn_regist_reader = document.getElementById("jump_regist_page_reader");
            btn_regist_reader.onclick = function () {
                window.location.href = "regist_reader.jsp"
            }



            //作者登陆
            var formobj = document.getElementById("form_writer");
            formobj.onsubmit = function () {
                if (check_writer == true) {
                    return true;
                } else {
                    alert("登录名或密码不正确！")
                    return false;
                }
            }
            //作者注册
            var btn_regist_writer = document.getElementById("jump_regist_page_writer");
            btn_regist_writer.onclick = function () {
                window.location.href = "regist_writer.jsp"
            }

            //管理员登陆
            var formobj = document.getElementById("form_writer");
            formobj.onsubmit = function () {
                if (check_writer == true) {
                    return true;
                } else {
                    alert("登录名或密码不正确！")
                    return false;
                }
            }

        }

        //读者响应事件
        function onblur_username_reader() {
            var usernameobj = document.getElementById("username_reader");
            var usernameText = usernameobj.value;
            var patt_phone = /^1\d{10}$/;
            var patt_email = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
            var usernameSpanobj = document.getElementById("error_reader");
            if (patt_phone.test(usernameText) || patt_email.test(usernameText)) {
                usernameSpanobj.innerHTML = "";
                check_reader = true;

            } else {
                usernameSpanobj.innerHTML = "用户名输入错误";
                check_reader = false;

            }
        }
        function onblur_password_reader() {
            var passwordobj = document.getElementById("password_reader");
            var passwordText = passwordobj.value;
            var patt = /^\w{5,12}$/;
            var passwordSpanobj = document.getElementById("error_reader");
            if (patt.test(passwordText)) {
                passwordSpanobj.innerHTML = "";
                check_reader = true;
            } else {
                passwordSpanobj.innerHTML = "密码由6到12位的字母数字下划线构成";
                check_reader = false;
            }
        }

        //作者响应事件
        function onblur_username_writer() {
            var usernameobj = document.getElementById("username_writer");
            var usernameText = usernameobj.value;
            var patt_phone = /^1\d{10}$/;
            var patt_email = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
            var usernameSpanobj = document.getElementById("error_writer");
            if (patt_phone.test(usernameText) || patt_email.test(usernameText)) {
                usernameSpanobj.innerHTML = "";
                check_writer = true;

            } else {
                usernameSpanobj.innerHTML = "用户名输入错误";
                check_writer = false;

            }
        }
        function onblur_password_writer() {
            var passwordobj = document.getElementById("password_writer");
            var passwordText = passwordobj.value;
            var patt = /^\w{5,12}$/;
            var passwordSpanobj = document.getElementById("error_writer");
            if (patt.test(passwordText)) {
                passwordSpanobj.innerHTML = "";
                check_writer = true;
            } else {
                passwordSpanobj.innerHTML = "密码由6到12位的字母数字下划线构成";
                check_writer = false;
            }
        }

        //管理员响应事件
        function onblur_password_admin() {
            var passwordobj = document.getElementById("password_admin");
            var passwordText = passwordobj.value;
            var patt = /^\w{5,12}$/;
            var passwordSpanobj = document.getElementById("error_admin");
            if (patt.test(passwordText)) {
                passwordSpanobj.innerHTML = "";
                check_admin = true;
            } else {
                passwordSpanobj.innerHTML = "密码错误";
                check_admin = false;
            }
        }
    </script>
</head>
<body>
<%--读者--%>
<div class="login_box" id="reader_box">
    <form action="login_readerServlet" method="post" id="form_reader">
        <div class="title">
            读 者 登 陆
        </div>
        <div class="error_div">
            <span id="error_reader" style="color: red;"></span>
        </div>
        <div class="username_div">
            <input type="text" name="username" class="username" id="username_reader" placeholder="手机号/邮箱"
                   onblur="onblur_username_reader()"/>
        </div>
        <div class="password_div">
            <input type="password" name="password" class="password" id="password_reader" placeholder="请输入登陆密码"
                   onblur="onblur_password_reader()"/>
        </div>
<%--        <div class="forget_password">--%>
<%--            <a>忘记密码?</a>--%>
<%--        </div>--%>
        <div class="login_button">
            <input type="submit" class="button" value="登  陆">
        </div>
    </form>
    <div class="regist_button">
        <button class="button" id="jump_regist_page_reader">读 者 注 册</button>
    </div>

</div>

<%--作者--%>
<div class="login_box" id="writer_box" style="display: none">
    <form action="login_writerServlet" method="post" id="form_writer">
        <div class="title">
            作 者 登 陆
        </div>
        <div class="error_div">
            <span id="error_writer" style="color: red;"></span>
        </div>
        <div class="username_div">
            <input type="text" name="username" class="username" id="username_writer" placeholder="手机号/邮箱"
                   onblur="onblur_username_writer()"/>
        </div>
        <div class="password_div">
            <input type="password" name="password" class="password" id="password_writer" placeholder="请输入登陆密码"
                   onblur="onblur_password_writer()"/>
        </div>
<%--        <div class="forget_password">--%>
<%--            <a>忘记密码?</a>--%>
<%--        </div>--%>
        <div class="login_button">
            <input type="submit" class="button" value="登  陆">
        </div>
    </form>
    <div class="regist_button">
        <button class="button" id="jump_regist_page_writer">作 者 注 册</button>
    </div>

</div>

<%--管理员--%>
<div class="login_box" id="admin_box" style="display: none">
    <form action="login_adminServlet" method="post" id="form_admin">
        <div class="title">
            管 理 员 登 陆
        </div>
        <div class="error_div">
            <span id="error_admin" style="color: red;"></span>
        </div>
        <div class="username_div">
            <input type="text" name="username" class="username" id="username_admin" placeholder="管理员账号"/>
        </div>
        <div class="password_div">
            <input type="password" name="password" class="password" id="password_admin" placeholder="请输入登陆密码"
                   onblur="onblur_password_admin()"/>
        </div>

        <div class="login_button">
            <input type="submit" class="button" value="登  陆">
        </div>
    </form>

</div>

<button class="button" id="rotate" value="读者登陆" onclick="btn()">作者登陆</button>
<%-- 值是读者，表示現在是读者页面，显示名称是作者，是用户要点击后将要转到的页面               --%>

</body>

<script type="text/javascript">
    var btn1 = document.getElementById('rotate');
    var box1 = document.getElementById('reader_box');
    var box2 = document.getElementById('writer_box');
    var box3 = document.getElementById('admin_box');

    function btn() {

        if (btn1.value == "读者登陆") {

            box1.style.display = 'none';
            box2.style.display = "";
            box3.style.display = 'none';
            btn1.innerHTML = "管理员登陆"
            btn1.value = "作者登陆";
        } else if (btn1.value == "作者登陆") {
            box1.style.display = 'none';
            box2.style.display = 'none';
            box3.style.display = '';
            btn1.innerHTML = "读者登陆"
            btn1.value = "管理员登陆";
        } else {
            box1.style.display = '';
            box2.style.display = 'none';
            box3.style.display = 'none';
            btn1.innerHTML = "作者登陆"
            btn1.value = "读者登陆";
        }
    }
</script>

</html>



